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Abstrak 


MVC diperkenalkan sebagai pola arsitektur yang diterapkan dalam lingkungan SmallTalk. Pada 
waktu itu, Trygve Reenskaug memperkenalkannya sebagai THING-MODEL-VIEW-EDITOR pada 
tanggal 12 Mei 1979, dan kemudian EDITOR berkembang menjadi Controller serta konsep 
THING menjadi cakupan aplikasi . Konsep MVC terbagi menjadi tiga kelas utama yaitu model, 
view, dan controller. Model berperan dalam menyediakan, mengolah dan mengatur informasi dari 
basis data sesuai dengan instruksi dari controller. View berfungsi untuk menampilkan informasi 
kepada pengguna sesuai perintah dari controller. Controller berperan dalam mengatur tugas yang 
dilakukan oleh model dan view. Pembagian kelas ini sangat membantu dalam memudahkan proses 
integrasi kode program. MVC juga mempunyai keuntungan antara lain, Optimasi Pembuatan 
Website Melalui Pendekatan MVC Testing Jadi lebih Error atau Bug Lebih Cepat dan Mudah 
Ditangani, Pemeliharaan atau Maintenance Lebih Mudah. Metode yang digunakan adalah 
metode kualitatif melalui sumber pustaka yang terdiri dari beberapa website, artikel serta jurnal. 


Kata Kunci: MVC, Controller, View, Model 
Abstract 


MVC was introduced as an architectural pattern implemented in the SmallTalk environment. At 
that time, Trygve Reenskaug introduced it as THING-MODEL-VIEW-EDITOR on May 12, 1979, 
and then EDITOR developed into Controller and the THING concept became application scope. 
The MVC concept is divided into three main classes namely model, view, and controller. The model 
plays a role in providing, processing and managing information from the database according to 
instructions from the controller. View functions to display information to the user according to 
commands from the controller. The controller plays a role in managing the tasks performed by 
models and views. This class division is very helpful in facilitating the integration process of 
program code. MVC also has advantages, including, Optimizing Website Creation Through the 
MVC Testing Approach So there are more Errors or Bugs Faster and Easier to Handle, 
Maintenance or Maintenance Easier. The method used is a gualitative method through library 
sources consisting of several websites, articles and journals. 
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PENDAHULUAN 


Pertama kali, MVC diperkenalkan sebagai pola arsitektur yang diterapkan dalam lingkungan 
SmallTalk. Pada waktu itu, Trygve Reenskaug memperkenalkannya sebagai THING-MODEL- 
VIEW-EDITOR pada tanggal 12 Mei 1979, dan kemudian EDITOR berkembang menjadi 
Controller serta konsep THING menjadi cakupan aplikasi (REE79J. Sejak itu, MVC terus 
berkembang dan pertama kali diimplementasikan untuk pustaka kelas di Smalltalk-80 oleh Jum 
Althoff dan lainnya (REE79). 


MVC, merupakan frasa yang paling umum digunakan dalam bidang web-programming dalam 
beberapa tahun terakhir (Pablo Pastor, 2010). Hal ini disebabkan oleh popularitas dan 
kepentingannya. MVC membagi pengembangan aplikasi berdasarkan komponen utama yang 
terlibat dalam pembuatan aplikasi seperti manipulasi data, antarmuka pengguna, dan bagian 
kontrol dalam aplikasi web. Julia 


Model View Controller (MVC) sebagai metode untuk membuat aplikasi dengan memisahkan 
data (Model) dari tampilan (View) dan cara memprosesnya (Controller). Saat ini, sebagian besar 
framework dalam pembuatan aplikasi website menggunakan arsitektur MVC. Dengan 
memisahkan komponen utama seperti manipulasi data, antarmuka pengguna, dan kontrol aplikasi 
web, MVC memudahkan pengembangan aplikasi. 


MVC merupakan suatu pola arsitektur yang mengatur keseluruhan arsitektur dari sebuah 
aplikasi. Meskipun sering disebut sebagai pola desain, terkadang kita mungkin keliru apabila 
hanya menyebutnya sebagai pola desain lantaran pola desain digunakan untuk menyelesaikan 
suatu permasalahan teknis spesifik. Sementara pola arsitektur digunakan untuk menyelesaikan 
permasalahan arsitektur sehingga mempengaruhi secara menyeluruh arsitektur aplikasi kita. 


TINJAUAN PUSTAKA 
A. Definisi MVC 


MVC, merupakan frasa yang paling umum digunakan dalam bidang web-programming 
dalam beberapa tahun terakhir (Pablo Pastor, 2010). Hal ini disebabkan oleh popularitas dan 
kepentingannya. MVC membagi pengembangan aplikasi berdasarkan komponen utama yang 
terlibat dalam pembuatan aplikasi seperti manipulasi data, antarmuka pengguna, dan bagian 
kontrol dalam aplikasi web. Walaupun cukup terkenal dan memiliki beberapa kekurangan, 
kompleksitas tetap menjadi fitur utama yang ditawarkan oleh MVC. 


Berikut tiga komponen dalam konsep MVC: 


1. Model, mencakup semua aspek data yang digunakan oleh pengguna. Ini mencakup data yang 
ditransfer antara View Component dan Controller Component atau data yang terkait dengan 
logika bisnis lainnya. Sebagai contoh, objek pelanggan akan mengambil informasi pelanggan 
dari database, memanipulasi data tersebut, dan memperbarui data ke database atau 
menggunakannya untuk merender data. 


2. View, Penggunaan Komponen view diperuntukkan bagi seluruh logika UI aplikasi. Sebagai 
contoh, tampilan pelanggan akan mencakup semua komponen UI seperti kotak teks, opsi turun, 
serta lainnya yang berinteraksi dengan akhir pengguna. 

3. Controller , Sebagai penghubung antara Model dan View, Controller bertugas memproses 
semua permintaan dan logika bisnis yang masuk, serta mengolah data dengan menggunakan 
komponen Model. Controller juga berinteraksi dengan View untuk menghasilkan output akhir. 
Sebagai contoh, customer controller berperan dalam mengelola interaksi dan input dari 
customer view, serta melakukan update pada database menggunakan customer model. 
Controller yang sama juga dapat digunakan untuk melihat data customer. (Putri Aprilia 2021) 


Singkatnya Model sebagai pengelola logika data. View Menunjukkan data dari pengelolaan 
kepada pengguna. Controller Memantau aliran data ke objek pengelola dan mengubah tampilan 
setiap kali terjadi perubahan data. 


B. Keuntungan menggunakan konsep MVC 


1. Optimasi Pembuatan Website Melalui Pendekatan MVC 


Pendekatan MVC memecah pembuatan website menjadi tiga bagian yang berbeda. 
Bagian model dan controller dapat dihandle oleh developer back-end, sementara view dapat 
diatur oleh developer front-end dan tim UI UX. 


2. Testing Jadi lebih Mudah 


Dengan menggunakan kerangka MVC, proses testing bisa dilakukan per bagian yang 
telah siap. Selain itu, pembuatan dokumentasi dari setiap fitur bisa lebih efisien dan rapi 
karena proses testing bisa dilakukan per bagian. 


3. Error atau Bug Lebih Cepat dan Mudah Ditangani 


Web oleh MVC memungkinkan pengembang untuk memusatkan perhatian pada aspek 
pengembangan yang berbeda-beda. Dengan demikian, mereka dapat dengan lebih efisien 
mengidentifikasi kesalahan dan melakukan perbaikan. 


4. Pemeliharaan atau Maintenance Lebih Mudah 


Penggunaan script yang lebih terstruktur dan rapi memudahkan tim developer dalam 
proses pengembangan dan maintenance website. 


C. Cara Kerja MVC 


1. Bagian tampilan akan meminta informasi agar dapat ditampilkan kepada pengguna. 
2. Kemudian permintaan tersebut diambil oleh pengendali dan diserahkan ke bagian model 
untuk diproses. 


3. Modelakan memproses dan mencari data informasi tersebut di dalam basis data. Selain 
itu, 1a akan memberikan kembali hasilnya ke pengendali untuk ditampilkan di tampilan. 

4. Pengendali mengambil hasil olahan yang dilakukan di bagian model dan menatanya di 
bagian tampilan. 


METODE 


Metode yang digunakan adalah metode kualitatif melalui sumber pustaka yang terdiri dari 
beberapa website, artikel serta jurnal. 


HASIL DAN PEMBAHASAN 


id (Server: 127.0.0.1 > @ Database: data mahasiswa > (RP Tabel: mahasiswa 


_] Jelajahi W# Struktur |J SQL à Cari ë Tambahkan $3 Ekspor xl Impor s1 HakAkses ” Operasi 3 Trigger 


[ Edit dikotak J [| Ubah ) [| Buat kode PHP ] 


Yi Struktur tabel 485 Tampilan hubungan 


# Nama Jenis Penyortiran Atribut Tak Ternilai Bawaan Komentar Ekstra Tindakan 
O 1 Nama varchar(25) utf8mb4_general_ci Tidak Tidak ada Ubah @ Hapus Lainnya 
O 2 Nim int(15) Tidak Tidak ada Ubah @ Hapus Lainnya 
© 3 Alamat varchar(50) utf8mb4_general_ci Tidak Tidak ada J Ubah @ Hapus Lainnya 
O 4 Prodi varchar(40) utf8mb4_general_ci Tidak Tidak ada p Ubah @ Hapus Lainnya 
O 5 Fakultas varchar(20) utf8mb4_general_ci Tidak Tidak ada J Ubah @ Hapus Lainnya 
tt O Pilih Semua Dengan pilihan. F Jelajahi & Ubah @ Hapus ? Utama w Unik F] Indeks FE Spasial [F Teks penuh 


Gambar 1.1 Database, Gambar tersebut menunjukkan database yang digunakan pada program Data 
Mahasiswa. Di buat menggunakan localhost/phpmyadmin yang berisi nama database 
data mahasiswa dan tabel bernama mahasiswa. 


FS projecmvc 
E-E Source Packages 
S-E controller 
© ctrimhs.java 
H- model 
-Æ data mahasiswa.java 
B- view 
-E desaindata.java 


Gambar 1.2 Nama Package dan Class 


Start Page «| Bi data mahasiswa. java “| KB desaindatajava “| Bi drimhs.java “| Konek java = E OperatorAritmatika.java * 
| source History (BS M-E-ASF3I PRAYO 


& 
s 
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u javax. swing. Jop: 

12 .data maha 

13 w.desaindata: 

14 

15 

16 

i| L 

18 ass otrimhs | 

15 e data mahasiswa mhs: 

q e desaindata tamp 

21 te Object txt 

22 e Object txtalamat; 

23 

24 otrimhs (desaindata tampil) | 

25 .tampil = tampil: 

26 } 

2 G oid prosesi) { 

28 is = new data_mahasiswa(); 

25 mhs.se' nama ().getText ()): 

30 mhs.setNim(tampil.gettxtnim() 

3 mhs.setAlamat (tampil .gettxt. 

32 mhs.setprodi (tampil.gettxtprodi () .getText ()): 

a mhs.setFakultas (tampil.gettxtfakultas () .getText ()): 

n 

3s tampil.gettxttampil () .setText ( "DATA MAHASISWANn" 

36 #“Nama— petNama () + “Nn” 

2 "tmhs.getNim() + "Nari 

38 +"Alamat = "#mhs.getAlamat ()+"\n" 
39 Pre "+mhs.getProdi ()+"\n" 
40 +"Fakultas = "#mhs.getFakultas ()): 


Gambar 1.3 Coding controller, gambar ini menunjukkan fungsi untuk tombol proses pada program 
Data Mahasiswa. 


.Gettxttampil () .set 


tmhs.getNim()+" 


+nhs.getFakultas()+**):"}; 


d hapus () 


ment statement = (Statement) Konek.ge tion() .createstatement () : 


WHERE Nim» '"#mhs.getNim() 4” "3 


ment .executeUpdate (“DELETE FROM mahasisw 


e 0): 


MessageDialog(null, "Data 


ageDialog(null, "Data Gagal Dihapus"): 


Gambar 1.4 Coding controller, gambar ini menunjukkan fungsi untuk tombol reset,simpan dan 
hapus pada program Data Mahasiswa. 


Start Page x i data mahasiswa java «Kb desaindatajjava = È ctrimhs.java >< Wi Konekjava x E OperatorAritmatikajjava > 


Source History [BW-W- ANTENG AYO ba 
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a swing. JOptionpa 

a si.Konek: 
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lass data mahasiswa | 


28 p String getNama() | 
29 return nama: 

30 , 

31 

32 tring getNimi) | 
3 zn nim; 

3 , 


Gambar 1.5 Coding Model, gambar tersebut berisi data-data yang akan dinputkan pada program 
Data Mahasiswa. 


34 L , 

35 

36 E public String getAlamati) { 

37 return alamat; 

38 , 

39 

40 E public String getProdi() | 

4 return prodi; 

Es - , 

43 

4. 5 public String getFakultas () ( 

45 return fakultas: 

46 , 

47 

“| public void setNama(String nama) ( 
49 This.nama = nama: 

50 - | 

51 

52 E public void setNim(String nim) ( 
s3 this.nim = nim; 

s4 - , 

55 

se O public void setAlamat (String alamat) ( 
57 this.alamat = alamat: 

s8 , 

59 

60 public void setProdi (String prodi) ( 
61 this.prodi = prodi; 

62 , 

63 

64 public void setFakultas (String fakultas) { 
65 this. fakultas = fakultas; 

66 } 


Gambar 1.6 Coding Model, gambar tersebut berisi data-data yang akan dinputkan pada program 
Data Mahasiswa. 


Start Page x BI data mahasiswajava x|E5 desaindata.java “| drimhs.java x|SI Konek.java x | Eb OperatorAritmatika.java * 
Source | Design History [E B-A PRIPO agen 


10 Gauthor 

11 

12| package view: 

13 

@ © import Koneksi.Konek: 

@ | import com.mysgl.jdbc.Statement: 

16| | import controller.ctrimhs: 

@ | import javax.swing.JOptionpane: 

18 import javax.swing.JTextArea: 

19| L import javax.swing.JTextrield: 

20 

21 public class desaindata extends javax.swing.JFrame ( 
a private ctrlmhs ctrl; 

23 

24| O public desaindata() { 

25 initComponents () : 

26 ctrl = new ctrimhs (this): 

27| - , 

28| © public JTextField gettxtnama() { 
29 return txtnama; 

30| | } 

ma public JTextField gettxtnim() ( 
32 return txtnim: 

33| - 4 

34| © public JTextField gettxtalamat() { 
35 return txtalamat; 

36| - } 

37| © public JTextField gettxtprodi() { 
38 return txtprodi; 

39| - , 

40 E] public JTextField gettxtfakultas () ( 
41 return txtfakultas: 

a2| L $ 

43| E public JTextArea gettxttampil() { 
44 return txttampil; 

as) | $ 

46 


Gambar 1.7 Coding View, Gambar tesebut berisi fungsi code untuk menuliskan text editor. 


Start Page = ià data mahasiswa.java < Eò desaindata.java “ IIS drimhs.java « E Konek.java > Eò OperatorAritmatika.java = 
| Source Design History P B-82- ARSA Page Ga 

s2 @SuppressWarnings ("unchecked") 

s3 E enerated 

242 

243 private void txtnamaActionPerformed (java. awt. event.ActionEvent evt) | 

244 

245 , 

246 
247 
248 
249 4 


5 private void txtfakultasActionPerformed (java.awt.event.ActionEvent evt) ( 


251 private void btntampilActionPerformed (java.awt.event.ActionEvent evt) | 


253 ctrl.proses(); 


256 O private void btnresetActionPerformed (java.awt.event.ActionEvent evt) | 


256 ctrl.reset({); 


261 E private void btnexitActionPerformed (java.awt.event.ActionEvent evt) | 


263 System. exit(0); 


266 private void btnsimpanActionPerformed(java.awt.event.ActionEvent evt) | 
268 ctrl.simpan (); 


270 + 
21 

272 E private void btnhapusActionPerformed (java.awt.event.ActionEvent evt) | 
273 

274 ctrl.hapus (): 


Gambar 1.8 Method view, Gambar tersebut berisi pemanggilan fungsi di ctrl ke view 


Start Page = Wi data_mahasiswa.java “| K3 desaindata java = ctrimhsjava “8 Konek.java = iè OperatorAritmatika.java > 
Source Design History B B-D- FTG FLD IY O lA d 
2n private void btnhapusActionPerformed (java. awt. event. ActionEvent evt) | 


215 trì.hapus(); 


201 public static void main(String argsil) ( 


Gambar 1.8 Coding View, Gambar tesebut berisi fungsi code untuk menuliskan text editor. 


313 

314 private javax.swing.JButton btnexit: 

318 private javax.swing.JButton btnhapus: 

316 private javax.swing.JButton btnreset: 

317 private javax.swing.JButton btensimpan: 
719 private javax.sving.JButton btntampil: 
19 private javax.swing.JLabel jLabeli: 

120 private javax.swing.JLabel jLabe12: 

321 private javax.swing.JLabel jLabe13: 

322 private javax.swing.JLabel jLabel47 

129 private javax.swing.JLabel jLabe15: 

120 private javax.swing.JLabel jLabel6: 

225 private javax.swing.JPanel jPanell: 

326 private .swing.JScrollpane jscrollpanel; 
327 private javax.swing. JTextField txtalamat; 
128 private javax.sving.JTextField txtrfakultas, 
129 private javax.swing. JTextField txtnama: 
330 private javax.swing.JTextField txtnim; 
31 private javax.swing. JTextField txtprodis 
332 private javax.swing.JTextArea txttampils 
333 

334 

335 


= | 
Gambar 1.9 Coding View, Gambar tesebut berisi fungsi code untuk menuliskan text editor. 


run 


BUILD SUCCESSFUL (total time: 9 minutes 51 seconds) 


SUS 


2 IS Output. 


Gambar 1.10 Output, Gambar tersebut menunjukkan bahwa proses running program berhasil. 


Message K 


kaa Data Berhasil Disimpan 


Ce] 


Gambar 1.11 Interface Tombol Simpan, Gambar tersebut menunjukkan bahwa data berhasil 
disimpan. 


Gambar 1.12 Interface Tombol Hapus, Gambar tersebut menunjukkan bahwa data di database 
yang tersimpan berhasil dihapus. 


KESIMPULAN 


Model View Controller (MVC) sebagai metode untuk membuat aplikasi dengan memisahkan 
data (Model) dari tampilan (View) dan cara memprosesnya (Controller). Saat ini, sebagian besar 
framework dalam pembuatan aplikasi website menggunakan arsitektur MVC. Dengan 
memisahkan komponen utama seperti manipulasi data, antarmuka pengguna, dan kontrol aplikasi 
web, MVC memudahkan pengembangan aplikasi. 

Keuntungannya antara lain Optimasi Pembuatan Website Melalui Pendekatan MVC, Testing 
Jadi lebih Mudah , Error Lebih Cepat dan Mudah Ditangani, Pemeliharaan atau Maintenance 
Lebih Mudah . 
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